<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button-group>
        <el-button
          v-btnHas="'group:add'"
          type="primary"
          icon="plus"
          @click="handleCreate"
        >
          添加
        </el-button>
        <el-button
          v-btnHas="'group:update'"
          type="primary"
          icon="edit"
          @click="handleUpdate"
        >
          编辑
        </el-button>
        <el-button
          v-btnHas="'group:delete'"
          type="primary"
          icon="delete"
          @click="handleDelete"
        >
          删除
        </el-button>
      </el-button-group>
    </div>

    <el-row>
      <el-col :span="8" style="margin-top: 15px">
        <el-tree
          class="filter-tree"
          node-key="id"
          highlight-current
          lazy
          :load="loadNode"
          :data="treeData"
          :props="defaultProps"
          :filter-node-method="filterNode"
          @node-click="getNodeData"
        />
      </el-col>

      <el-col :span="14" style="margin-top: 15px">
        <el-card class="box-card">
          <el-form
            ref="dataForm"
            :label-position="labelPosition"
            label-width="100px"
            :model="temp"
          >
            <el-form-item label="节点编号" prop="id">
              <el-input v-model="temp.id" disabled placeholder="节点编号" />
            </el-form-item>
            <el-form-item label="父级节点" prop="parentId">
              <el-input
                v-model="temp.parentId"
                :disabled="formRead"
                placeholder="请选择父级节点"
              />
            </el-form-item>
            <el-form-item label="组名称" prop="name">
              <el-input
                v-model="temp.name"
                :disabled="formRead"
                placeholder="请输入名称"
              />
            </el-form-item>
            <el-form-item label="简介" prop="description">
              <el-input v-model="temp.description" :disabled="formRead" />
            </el-form-item>
            <el-form-item label="创建时间" prop="description">
              <el-input v-model="temp.createdTime" disabled />
            </el-form-item>
            <el-form-item label="创建人" prop="description">
              <el-input v-model="temp.createdBy" disabled />
            </el-form-item>
            <el-form-item label="修改时间" prop="description">
              <el-input v-model="temp.updatedTime" disabled />
            </el-form-item>
            <el-form-item label="修改人" prop="description">
              <el-input v-model="temp.updatedBy" disabled />
            </el-form-item>

            <el-form-item>
              <el-button
                v-if="dialogStatus == 'create'"
                type="primary"
                @click="handleAdd"
              >创建</el-button>
              <el-button
                v-else
                type="primary"
                @click="handleModify"
              >保存</el-button>
              <el-button @click="onCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  fetchGroupByParentId,
  getGroup,
  updateGroup,
  deleteGroup
} from '@/api/admin/group'

export default {
  name: 'GroupManagement',
  filters: {},
  data() {
    return {
      total: 0,
      listLoading: true,
      // 当前选中的节点id
      currentId: '',
      formEdit: false,
      formRead: !this.formEdit,
      formStatus: '',
      // 树数据
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dialogStatus: 'create',
      dialogFormVisible: false,
      labelPosition: 'right',
      temp: {
        parentId: undefined,
        id: undefined,
        name: '',
        description: '',
        createdTime: '',
        createdBy: '',
        updatedTime: '',
        updatedBy: ''
      }
    }
  },
  created() {
    this.fetchGroupByParentId('-1')
  },
  methods: {
    /**
     * 根据父节点id，查询子节点
     * @param parentId 父节点id
     */
    fetchGroupByParentId(parentId) {
      fetchGroupByParentId(parentId).then((response) => {
        this.treeData = response.data
      })
    },
    /**
     * 保存组
     */
    handleAdd() {},
    handleCreate() {
      this.temp = {}
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      this.formEdit = true
    },
    handleDelete() {
      if (!this.temp.id) {
        this.$notify({
          title: '提示',
          message: '未选择组织'
        })
        return
      }
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteGroup(this.temp.id).then(() => {
          this.$notify({
            title: '删除成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.fetchGroupByParentId('-1')
        })
      })
    },
    handleUpdate() {
      this.formEdit = true
      this.formRead = false
      this.dialogStatus = 'edit'
      this.dialogFormVisible = true
    },
    handleModify() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          updateGroup(this.temp).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: '编辑成功',
              message: '编辑成功',
              type: 'success',
              duration: 2000
            })
            this.fetchGroupByParentId('-1')
          })
        }
      })
    },
    onCancel() {
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    /**
     * 加载树数据
     * @param node 树节点
     * @param resolve
     *
     */
    loadNode(node, resolve) {
      fetchGroupByParentId(node.data.id).then((response) => {
        resolve(response.data)
      })
    },
    /**
     * 获取节点数据
     * @param data
     */
    getNodeData(data) {
      if (!this.formEdit) {
        this.formStatus = 'update'
      }
      getGroup(data.id).then((response) => {
        this.temp = response.data
      })
      this.currentId = data.id
    },
    /**
     * 搜索node节点
     */
    filterNode() {}
  }
}
</script>
